import React from 'react';
import { observable, autorun } from 'mobx';

// const num = observable.box(10);
// const name = observable.box('张三');

// autorun(() => {
//   console.log('num', num.get());
// });

// autorun(() => {
//   console.log('num1', num.get());
//   console.log('name', name.get());
// });

// setTimeout(() => {
//   num.set(20);
// }, 1000);

// setTimeout(() => {
//   name.set('李四');
// }, 2000);

// // 复杂对象
// const obj = observable.map({ name: '张三', age: 10 });

// autorun(() => {
//   console.log('name', obj.get('name'));
// });

// setTimeout(() => {
//   obj.set('name', '李四');
// }, 1000);

// setTimeout(() => {
//   obj.set('age', 20);
// }, 2000);

// // 复杂对象
// const obj = observable({ name: '张三', age: 10 });
// console.log('obj', obj);
// autorun(() => {
//   console.log('name', obj.name);
// });

// setTimeout(() => {
//   obj.name = '李四';
// }, 1000);

// setTimeout(() => {
//   obj.age = 20;
// }, 2000);

// 复杂对象
const arr = observable(['11', '22']);
console.log('arr', arr);
autorun(() => {
  console.log('0', arr[0]);
});

setTimeout(() => {
  arr[0] = '33';
}, 1000);

setTimeout(() => {
  arr[1] = '44';
}, 2000);

const App = () => {
  return <div>App</div>;
};

export default App;
